.home-main {
    display: flex;
    justify-content: center;
    background-color: $cwhite;
    height: 100vh;
    margin-top: -70px;

    .focus-cover {
        margin-top: 70px;
        max-width: 98vw;
        width: 320px;
        height: 480px;
        max-height: 70vh;
        color: $cfont-semi;
        border-radius: $border-radius-small;
        box-shadow: 0 0 4px 0 $cgray-base;
        animation: focus-cover 3s;
        transition: all 500ms linear;

        img {
            width: 100%;
            max-height: 30vh;
        }

        .title {
            font-weight: 400;
            margin-top: 10px;
        }

        .description {
            width: 100%;
            max-height: 40vh;
            padding: 0 30px 30px;
            color: $cfont-semi;
            overflow: hidden;
        }
    }

    .focus-cover:hover {
        box-shadow: 0 0 10px 0 $cgray-base;
    }

    .slogan {
        position: absolute;
        bottom: 70px;
        right: 30px;
        color: $gray-lighter;
        cursor: pointer;
        transition: all 1s linear;
    }

    .slogan:hover {
        animation: slogan-show 700ms;
        color: $cfont-semi;
    }
}

@keyframes focus-cover {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slogan-show {
    from {
        color: $gray-lighter;
    }

    to {
        color: $cfont-semi;
    }
}